import React, { PureComponent } from 'react';
import { Icon } from 'antd-mobile';
import styles from './index.less';
import { MyIcon } from '../my-icon/index';

/**
 * @description 全屏下拉列表组件带单位
 * @author 简佳成
 * @date 2019-12-18
 * @class DropDown
 * @extends {PureComponent}
 */
class DropDown extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
      display: 'none',
    };
  }

  /**
   * @description 受控组件，只要父组件value改变刷新状态
   * @param {*} nextProps
   * @memberof DropDown
   */
  componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.value,
    });
  }

  /**
   * @description 控制下拉列表显示状态
   * @memberof DropDown
   */
  handleSelectClick = e => {
    const { display } = this.state;
    const changeDisplay = display == 'none' ? 'block' : 'none';
    this.setState({
      display: changeDisplay,
    });
  };

  /**
   * @description 控制下拉列表显示状态+获取值传递给父组件
   * @memberof DropDown
   */
  handleOptionClick = e => {
    const { display } = this.state;
    const { onChange } = this.props;
    const changeDisplay = display == 'none' ? 'block' : 'none';
    const changeValue = e.target.getAttribute('value');
    if (!changeValue) return;
    onChange && onChange(changeValue);
    this.setState({
      display: changeDisplay,
    });
  };

  render() {
    const { title, data, unit } = this.props;
    const { value, display } = this.state;
    // value映射到label
    const label = data.filter(item => {
      return item.value == value;
    })[0].label;
    return (
      <div style={{ width: '100%', height: '40%', display: 'flex', position: 'relative' }}>
        <div
          style={{
            width: '19%',
            display: 'flex',
            alignItems: 'center',
            marginLeft: '1vw',
            fontSize: '0.28rem',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
          }}
        >
          {title}
        </div>
        <div
          onClick={this.handleSelectClick}
          style={{
            width: '63%',
            height: '100%',
            borderRadius: '16px',
            background: 'rgba(255,255,255,0.15)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <div></div>
          <div style={{ fontSize: '0.34rem' }}>{label}</div>
          <Icon type="down" style={{ marginRight: '2vw' }} />
        </div>
        <div
          style={{
            width: '100%',
            height: '100%',
            display: display,
            position: 'absolute',
            top: '150%',
            zIndex: '9999',
          }}
          className={styles.select}
          value={value}
        >
          {data.map((option, index) => {
            return (
              <div
                value={option.value}
                key={index}
                className={styles.item}
                onClick={this.handleOptionClick}
              >
                {option.label}
                {option.value == value && (
                  <MyIcon
                    type="icongou"
                    style={{
                      fontSize: '0.6rem',
                      width: '0.6rem',
                      height: '0.6rem',
                      color: '#2878ff',
                      float: 'right',
                      position: 'absolute',
                      right: 0,
                    }}
                  />
                )}
              </div>
            );
          })}
        </div>
        <span style={{ marginLeft: '3%', display: 'flex', alignItems: 'center' }}>{unit}</span>
      </div>
    );
  }
}

export default DropDown;
